<!-- 地铁线路与客运量对比统计 -->
<template>
  <div class="h-100 w-100">
    <div style="height: 80px">
      <tablleBar
        @submit-swich="swichTable"
        :list="['年内地下水埋深变化过程曲线图', '可透水地面面积比例曲线图']"
      ></tablleBar>
    </div>
    <div style="height: calc(100% - 80px)">
      <div
        id="dtxlykyl"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";
import { useFunc } from "@/hook/useFunc";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
var yLabel0 = useOptions().month
const yData=ref([])
const yData1=ref([])
// var yData = [20, 18, 15, 13, 20, 18, 15,20, 18, 15, 13, 20,];
// var yData1 = [20, 18, 15,20, 18, 15, 13,20, 18, 15, 13,  20,];
let option = {
  grid: {
    left: "10%",
    right: "1%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",
      textStyle: {
        color: "white",
        fontSize: 20,
      },
 
    },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value}"+'米',
      fontSize: 20,
      color: "#667A8E",
    },
    nameTextStyle: {
      color: "#DEDEDE",
      fontSize: 12,
      padding: 10,
    },

    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed", //线的类型 虚线0
        opacity: 0.2, //透明度
      },
    },
  },
  xAxis: {
    type: "category",
    data: yLabel0,
    axisLabel: {
      fontSize: 20,
      color: "#667A8E",
    },
  },
  series: [
    {
      type: "line",
      data: [], // 示例数值数据
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(3, 230, 254, 1)", // 顶部颜色
          },
          {
            offset: 0.01,
            color: "rgba(3, 230, 254, 0)", // 接近底部的颜色
          },
          {
            offset: 1,
            color: "rgba(3, 230, 254, 1)", // 底部颜色，透明
          },
        ]),
      },
      barWidth: "40%", // 调整柱状图的宽度
    },
  ],
};
let myChart: any;
const activeItem = ref(0);
const swichTable = (item: any) => {
  activeItem.value = item;
  if (activeItem.value == 0) {
    option.series[0].data = props.echartsData[0]
    option.yAxis.axisLabel.formatter = "{value}"+'米'

  } else {
    option.series[0].data = props.echartsData[1]
    option.yAxis.axisLabel.formatter = "{value}"+'%'
  }
  myChart.setOption(option);
  useFunc().setDefaultOption(myChart)

};
onMounted(() => {

  myChart = echarts.init(document.getElementById("dtxlykyl") as HTMLElement);
  option.series[0].data = props.echartsData[0]

  myChart.setOption(option);
  useFunc().setDefaultOption(myChart)

});
</script>

<style></style>
